<template>
	<div>
		搜索 <input type="text" v-model="search" @change="inputSearch"> 
		<button> 按钮</button>
		<table>
			<tbody>
				<tr v-for="(item, index) in arr" :key="index">
					<td>{{ item.name }}</td>
					<td>{{ item.price }}</td>
				</tr>
			</tbody>
		</table>

	</div>
</template>

<script setup >
import { ref, reactive } from 'vue'
let search = ref("") // 精通
//2、需要一个数组来对表格的内容进行渲染,使用：数组对象
const arrObj = [
	{ name: 'C语言入门', price: 39.9 },
	{ name: 'Java从入门到精通', price: 49.9 },
	{ name: 'HTML5与CSS3入门', price: 35.5 },
	{ name: 'Vue2+Vue3框架入门到精通', price: 59.9 },
	{ name: 'Ajax与Git入门', price: 25.9 }
]
let arr = ref(arrObj)
// 能够获取到 input 的值, 从数组找到想要的数据
// 过滤  能够挑出数据,并且是数组
let inputSearch = function () {
	let xin = arrObj.filter((item) => {
		return item.name.includes(search.value)
	})
	// console.log(xin);
	arr.value = xin
}


</script>

<style scoped>
table {
	width: 500px;
}

table,
td,
th {
	border: 1px solid #ccc;
}
</style>